<template>
  <div>
    <el-table class="my-table m-t-10" :data="data" v-loading="loading" style="width: 100%" border height="350"
              :header-cell-style="{background:'#eee',color:'#000'}">
      <el-table-column type="index" align="center" label="序号" width="60"/>
      <el-table-column prop="updateTime" label="时间" min-width="180"/>
      <el-table-column label="理论余量（kg）" min-width="180">
        <template v-slot="scope">{{ scope.row.storageAfter | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="变化量（kg）" min-width="150">
        <template v-slot="scope">{{ scope.row.storageNum | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="变化原因" min-width="150">
        <template v-slot="scope">{{ scope.row.orderType | orderType }}</template>
      </el-table-column>
    </el-table>
    <div class="flex-center">
      <el-button size="small" class="m-t-20" @click="back">返回</el-button>
      <app-pagination ref="paginationRef" :total="total" class="m-t-20" @do-query="query"/>
    </div>
  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {getRecords, getTotal, isNull} from "@/util/common-util";
import {getAdjustHistoryPage} from "@/api/business/filling-machine";

export default {
  name: "margin-history-list-content",
  components: {AppPagination},
  props: ['info'],
  data() {
    return {
      data: [],
      loading: false,
      total: 0,
      search: {}
    }
  },
  mounted() {
    this.query()
  },
  filters: {
    orderType(v) {
      if (v === 0) return "加注"
      if (v === 1) return "补液"
      if (v === 2) return "余量校准"
      return "未知"
    }
  },
  methods: {
    query(_page) {
      if (isNull(_page)) {
        _page = this.$refs.paginationRef.getPage()
      }
      this.loading = true
      this.search.machineId = this.info.id
      getAdjustHistoryPage(_page, this.search).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.loading = false
      }).then(() => {
        this.loading = false
      })
    },
    back() {
      this.$emit('back')
    }
  }
}
</script>

<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
